<template>
    <div class="chart" id="myChart">
        <div class="emcs_charts" :id="id"></div>
    </div>
</template>

<script>
    import HighCharts from 'highcharts'

    export default {
        name: "historyChart",
        data() {
            return {
                id: 'chart',
                dataObj: {
                    chart: {//图表样式
                        type: 'area',//指定图表的类型,这里是面积图
                    },
                    //是否启用Labels。x，y轴默认值都是true，如果想禁用（或不显示）Labels，设置该属性为false即可
                    credits: {
                        enabled: false
                    },
                    title: {//指定图表标题

                    },
                    colors: ['#4287FE', 'rgba(226,188,37,1)', 'rgba(255,133,133,1)'],
                    xAxis: {//图表的横坐标,一个轴为{ }
                        title: {//横坐标标题
                            text: ''
                        },
                        //x坐标轴的刻度值
                        categories: ['01-04', '06-04', '12-04'], //指定x轴分组
                        labels: {//坐标轴上的刻度值（显示间隔、样式、单位）
                            style: {
                                color: '#999999'
                            },
                            format: '{value}',//刻度值的单位
                            align: 'center'
                        },
                        lineColor: '#dfdfdf',//坐标轴的颜色
                        tickColor: '#dfdfdf',//坐标轴上的刻度线的颜色
                        tickLength: 1,//坐标轴上刻度线的长度
                        gridLineWidth: 1,//网格线宽度。x轴默认为0，y轴默认为1px。
                        gridLineColor: '#f2f2f2',//网格线颜色。默认为：#C0C0C0。
                        // gridLineDashStyle: 'Dash',//网格线线条样式。和Css border-style类似，常用的有：Solid、Dot、Dash
                        tickInterval: 1,//刻度间隔
                        tickmarkPlacement: 'between',//刻度线对齐方式，有between和on可选，默认是between
                        style: {
                            color: '#999999',
                            fontSize: 10
                        },
                        crosshair: {//鼠标放上后显示纵轴的数据
                            color: '#999',
                            width: 1
                        }
                    },
                    yAxis: [{//图表的纵坐标，多个轴[{轴一},{轴二}]
                        gridLineWidth: 1,
                        gridLineColor: '#f2f2f2',
                        tickPositions: [-50, 0, 50, 100, 150, 200],//y轴刻度值
                        tickLength: 0,
                        title: {//纵坐标标题
                            text: ' ',
                            margin: 0,
                            style: {
                                color: '#999999',
                                fontSize: 10
                            }
                        },
                        labels: {//坐标轴上刻度的样式及单位
                            style: {
                                color: '#999999',
                                fontSize: 10
                            },
                            format: '{value}',//坐标轴上的单位
                        },
                        offset: -10,//距离坐标轴的距离
                    }, {
                        gridLineWidth: 1,
                        gridLineColor: '#f2f2f2',
                        tickColor: '#fff',
                        tickInterval: 25,
                        tickLength: 0,
                        title: {
                            text: '',
                            margin: 0,
                            style: {
                                color: '#999999',
                                fontSize: 10
                            }
                        },
                        labels: {
                            style: {
                                color: '#999999',
                                fontSize: 10
                            },
                            format: '{value}'
                        },
                        opposite: true,//设置opposite: true表示该轴位置反转，即为y轴时显示在右侧
                        offset: -10
                    }],
                    tooltip: {//数据提示框
                        headerFormat: '<small>{point.key}</small><br/>',//标题格式
                        pointFormat: '<span style="color:{series.color};">{series.name}</span>：{point.y}<br/>',
                        shared: true,
                        followPointer: true,//跟随鼠标
                        followPointerMove: true,//是否跟随手指移动
                        // footerFormat: 'muzi',//尾部格式化字符串
                        style: {
                            fontSize: 10,
                            fontFamily: '微软雅黑',
                            fontWeight: 'normal',
                            color: '#666'
                        }
                    },
                    //标示线总是垂直于它属于的轴。它可单独定义在x轴或y轴，也可以同时定义在x轴和y轴
                    plotOptions: {
                        area: {
                            //pointStart: 1940,
                            marker: {
                                enabled: false,
                                symbol: 'circle',
                                radius: 2,
                                states: {
                                    hover: {
                                        enabled: true
                                    }
                                }
                            },
                            fillOpacity: 0.2,
                            lineWidth: 1
                        }
                    },
                    legend: {//图例居中显示在图表下方
                        align: 'center',
                        symbolRadius: 5,//图标圆角
                        symbolWidth: 10,//图标宽度
                        symbolHeight: 10,//图标高度
                        itemStyle: {
                            color: '#999999',
                            fontWeight: 'normal',
                            fontSize: 12
                        },
                        itemMarginBottom: -14,//图例项底部外边距
                    },

                    series: []
                }
            }
        },
        mounted() {//钩子函数挂载时实例化这个图表
            // chart(参数1,参数2);第一个参数挂载组件的容器，第二个参数为图表所需要的数据对象
            // HighCharts.chart(this.id,this.dataObj)
            this.detail(0)
        },
        methods: {
            detail(type) {
                var typeDate = this.$route.query.typeDate
                console.log(typeDate, 'oooo')
                this.$api.get('market/data/flowtrend?timerange=' + type, {}, response => {
                    if (response.status >= 200 && response.status < 300) {
                        // console.log(response.data.data);
                        var arr = response.data.data
                        var dateArr = []
                        var timeArr = []
                        for (var i in arr) {
                            dateArr.push(arr[i].time)
                            timeArr.push(arr[i].value)
                        }
                        console.log(dateArr, 'kkkkkkk')
                        console.log(timeArr, 'kkkkkkk')
                        var arr1 = [].slice.call(timeArr);
                        var resArr = dateArr;
                        console.log(resArr, 'kkkkkkk')
                        this.dataObj.xAxis.categories = resArr
                        if (typeDate == 0) {
                            this.dataObj.series = [{//数据列是一组数据集合
                                name: '客流量数据',//name 代表数据列的名字，并且会显示在数据提示框（Tooltip）及图例（Legend）中
                                data: arr1,
                                tooltip: {
                                    valueSuffix: '%'
                                }
                            }]
                        }else if(typeDate == 1){
                            this.dataObj.series = [{//数据列是一组数据集合
                                name: '销售额数据',//name 代表数据列的名字，并且会显示在数据提示框（Tooltip）及图例（Legend）中
                                data: arr1,
                                tooltip: {
                                    valueSuffix: '%'
                                }
                            }]
                        }else if(typeDate == 2){
                            this.dataObj.series = [{//数据列是一组数据集合
                                name: '集客力数据',//name 代表数据列的名字，并且会显示在数据提示框（Tooltip）及图例（Legend）中
                                data: arr1,
                                tooltip: {
                                    valueSuffix: '%'
                                }
                            }]
                        }else if(typeDate == 3){
                            this.dataObj.series = [{//数据列是一组数据集合
                                name: '坪效值数据',//name 代表数据列的名字，并且会显示在数据提示框（Tooltip）及图例（Legend）中
                                data: arr1,
                                tooltip: {
                                    valueSuffix: '%'
                                }
                            }]
                        }
                        if (typeDate == 0) {
                            this.dataObj.title = {//指定图表标题
                                text: '单位（人）',
                                align: 'left',
                                style: {
                                    color: '#666',
                                    fontSize: '16px',
                                }
                            }
                        } else if (typeDate == 1) {
                            this.dataObj.title = {//指定图表标题
                                text: '单位（元）',
                                align: 'left',
                                style: {
                                    color: '#666',
                                    fontSize: '16px',
                                }
                            }
                        } else if (typeDate == 2) {
                            this.dataObj.title = {//指定图表标题
                                text: '单位（人/㎡）',
                                align: 'left',
                                style: {
                                    color: '#666',
                                    fontSize: '16px',
                                }
                            }
                        }else if (typeDate == 3) {
                            this.dataObj.title = {//指定图表标题
                                text: '单位（元/㎡）',
                                align: 'left',
                                style: {
                                    color: '#666',
                                    fontSize: '16px',
                                }
                            }
                        }
                        // console.log(this.dataObj)
                        HighCharts.chart(this.id, this.dataObj)
                    } else {
                        console.log(response.message);
                        //请求失败，response为失败信息
                    }
                });
            }
        }
    }
</script>

<style scoped lang='stylus'>
    .chart {
        float left;
        background-color #fff;
        padding 10px 0;
        margin-top 20px;
        border-radius 6px
        width 40%;

        .emcs_charts {
            min-width 890px;
            height 280px;
        }
    }
</style>